<template>
	<view class="order-list">
		<view class="head">
			<view>订单详情</view>
			<view class="circle-btn">
				<text class="txt" @click="back">返</text>
			</view>
		</view>
		
		<view>
			运单号:<text>{{ this.orderId }}</text>
		</view>
		
		<view class="status-box">
			<view class="txt">
				<view class="status">
					 {{ statusLabel( relicOrder.relicStatus || takeOrder.takeStatus) }}
				</view>
				<view class="sighTime">
					签收时间 <text>{{
						this.way == 1 ? takeOrder.completionTime : relicOrder.completionTime
					}}</text>
				</view>
			</view>
			<view class="show">
				<view class="des">
					{{ way ==0 ? order.pickUpAddress : order.wareHouseName }}
				</view>
				<view class="arrow">
					<image src="/static/yellow-arrow.png" class="yellow-arrow" mode="aspectFill"></image>
				</view>
				<view class="des">
					{{ way==0 ? order.wareHouseName :  order.homeDeliveryAddress }}
				</view>
				
			</view>
		</view>
		
		<view class="order-info">
			<!--  type==0 为寄出  -->
			<view class="send" v-if="way==0">
				<view>
					上门取件地址:<text>{{ relicOrder.pickUpAddress }}</text>
				</view>
				<view>
					联系人:<text>{{ relicOrder.contactPerson }}</text>
				</view>
				
				<view>
					联系电话:<text>{{ relicOrder.contactPhone }}</text>
				</view>
				<view>
					存放仓库名称:<text>{{ relicOrder.wareHouseName }}</text>
				</view>
				<view>
					物品名称:<text>{{ relicOrder.goodName }}</text>
				</view>
				<view>
					预计存储时间:<text>{{ relicOrder.storageTime }}</text>
				</view>
				<view>
					预约时间:<text>{{ relicOrder.appointmentTime }}</text>
				</view>
				
		<!-- 		<view>
					预计存储天数:<text>{{ relicOrder.goodName }}</text>
				</view>
				<view>
					预计存储价格:<text>{{ relicOrder.goodName }}</text>
				</view> -->
				
				<view>
					寄件方式:<text>{{ getMethodShow(relicOrder.relicMethod, 'relicMethods') }}</text>
				</view>
				<view>
					完成时间:<text>{{ relicOrder.completionTime }}</text>
				</view>
				<view>
				存物状态:<text>{{ statusLabel(relicOrder.relicStatus) }}</text>
				</view>
			</view>
			
			<!-- type==1 为取物  -->
		    <view class="withdraw" v-if="way==1">
		    	<view>
		    		订单号:<text>{{ takeOrder.takeOrderId }}</text>
		    	</view>
				<view>
					联系人:<text>{{ takeOrder.contactPerson }}</text>
				</view>
				
				<view>
					联系电话:<text>{{ takeOrder.contactPhone }}</text>
				</view>
				
				<view>
					送货上门地址:<text>{{ takeOrder.homeDeliveryAddress }}</text>
				</view>
				
				<view>
					物品名称:<text>{{ takeOrder.goodName }}</text>
				</view>
				
				<view>
					完成时间:<text>{{ takeOrder.completionTime }}</text>
				</view>
				<view>
					预约时间:<text>{{ takeOrder.appointmentTime }}</text>
				</view>
				<view>
					取货仓库名称:<text>{{ takeOrder.wareHouseName }}</text>
				</view>
				<view>
					取件方式:<text>{{ getMethodShow(takeOrder.takeMethod, 'takeMethods')  }}</text>
				</view>
				<view>
					订单状态:<text>{{ statusLabel(takeOrder.takeStatus) }}</text>
				</view>
		    </view>
		</view>	
		
		<view class="worker-box" v-if="order.deliveryPersonnel">
			<view class="avatar">
				<image :src="imgPrex + order.deliveryPersonnel.avatarUrl" class="avatar-image" mode="aspectFill" />
			</view>
			<view class="worker">
				<view class="item">
					工号：<text>{{order.deliveryPersonnel.serialNumber}}</text>
				</view>
				<view class="item">
					电话：<text>{{order.deliveryPersonnel.phoneNumber}}</text>
				</view>
			</view>
		</view>
		
		<view class="sign-box">
			<view class="avatar">收</view>
			<view class="worker">
				<view class="one">
					
					<view class="sign-staus">已签收</view>
					<view class="sign-img-btn" @tap="() => signaturesListShow = !signaturesListShow">查看签收图</view>				
				</view>
				
				<view class="signaturesList" v-show="signaturesListShow">
					<view class="item" v-for="(v, i) in order.deliverySignaturesList">
						<text class="time">{{v.createTime}}</text>
						<text>{{v.statusDescription}}</text>
					</view>
					
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	// 寄出
	const relicMethods = [
		{label: '服务点自寄', val: 0 },
		{label: '上门自取', val: 1 }
	];
	// 取件
	const takeMethods = [
		{label: '服务点自取', val: 0 },
		{label: '龙殿派送', val: 1 }
	];
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	import * as api from '../../utils/api.js';
	
	export default {
		data() {
			return {
				relicMethods,
				takeMethods,
				imgPrex,
				orderId: '',
                way: 0,
				signaturesListShow: false, // 是否展示signaturesList
				takeOrder: {
					deliverySignaturesList: []
				}, // 订单对象
				relicOrder: {
					deliverySignaturesList: []
				}, // 订单对象
				orderList: [],
				relicStatus: [], // 存物字典
				takeStaus: [],  // 取物字典
			}
		},
		
		computed: {
			order () {
				return this.way == 0 ? this.relicOrder : this.takeOrder
			},
			
		},
	    onLoad(options) {
			this.way = options.way;
			this.orderId = options.orderId;
			this.getOrderDetail({ orderId: this.orderId });
			
			this.relicStatus = JSON.parse(uni.getStorageSync('relic_status'));
			this.takeStatus = JSON.parse(uni.getStorageSync('take_status'));
		},
		methods: {
			getMethodShow (val, flag) {
				let result;
				if (flag == 'relicMethods') {
					result = this.relicMethods.find(v => v.val == val)
				}
				if (flag == 'takeMethods') {
					result = this.takeMethods.find(v => v.val == val)
				}
				
				return result?.label;
			},
			statusLabel (status) {
				let statusMap;
				if (this.way == 0) {
					statusMap = this.relicStatus;
				} else {
					statusMap = this.takeStatus;
				}
				
				return statusMap.find(v => v.dictValue == status)?.dictLabel;
			},
			async getOrderDetail({ orderId }) {
				if (this.way == 1) { // 取物
					const res = await api.personalTakeOrderDetail({ orderId });
					this.takeOrder = res.data;
					return
				}
				
				const res = await api.personalRelicOrderDetail({ orderId }); // 存物
				this.relicOrder = res.data;			
			},
			
			back () {
				uni.navigateBack()
			},
			
		}
	}
</script>

<style lang="scss">
  .order-list {
	  color: white;
	  padding: 40rpx 20rpx;
	  align-items: center;
	  
	  
	  .circle-btn {
	  			  width: 90rpx;
	  			  height: 90rpx;
	  			  border-radius: 50%;
	  			  background-color: #e5b44d;
	  			  text-align: center;
	  			  line-height: 90rpx;
	  			  .txt {
	  				  color: black;
	  				  font-size: 22px;
	  			  }
	  }
	  .head {
		  display: flex;
		  padding: 40rpx 10rpx;
		  border-radius: 10rpx;
		  justify-content: space-between;
		  font-size: 46rpx;
	  }
	  
	 
	.status-box {
		display: flex;
		padding: 20rpx 10rpx;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		gap: 30rpx;
		background-color: rgba(0, 0, 0, 0.3);
		.txt {
			width: 260rpx;
			text-align: center;
			.status {
				font-size: 34rpx;
			}
				
			.sighTime {
				font-size: 20rpx;
			}
		}
		.show {
			flex: 1;
			display: flex;
			align-items: center;
			.arrow {
				margin: 0 10rpx;
				.yellow-arrow {
					width: 140rpx;
					height: 40rpx;
				}
			}
			.des {
			 font-size: 32rpx;	
			}
		}
	}
	
	.order-info {
		margin: 20rpx 0;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		background-color: rgba(0, 0, 0, 0.3);
	}
		  
	  .worker-box {
		  display: flex;
		  align-items: center;
		  margin: 20rpx 0;
		  padding: 20rpx 20rpx;
		  background-color: rgba(0, 0, 0, 0.3);
		  border: 1px solid rgba(255, 255, 255, 0.3);
		  border-radius: 30rpx;
		  .avatar {
			  width: 60px;
			  height: 60px;
			  border-radius: 50%;
			  overflow: hidden;
			  background-color: darkred;
		  }
		  .item {
			  padding:10rpx  20rpx;
		  }
	  }
	  .sign-box {
		  display: flex;
		  align-items: start;
		  gap: 20rpx;
		  margin: 20rpx 0;
		  padding: 20rpx 20rpx;
		  background-color: rgba(0, 0, 0, 0.3);
		  border: 1px solid rgba(255, 255, 255, 0.3);
		  border-radius: 30rpx;
		   .avatar {
			  width: 80rpx;
			  height: 80rpx;
			  color: black;
			  line-height:80rpx;
			  text-align: center;
			  border-radius: 50%;
			  overflow: hidden;
			  background-color: rgba(255, 255, 255, 0.8);  
		   }
		   .one {
			   font-size: 30rpx;
			   display: flex;
			   align-items: center;
			   .sign-staus {  
			   }
			   .sign-img-btn {
				 margin-left: 30rpx;
				 padding: 5rpx 30rpx;
				 border: 1px solid rgba(255, 255, 255, 0.3);
				 border-radius: 30rpx;
			   }
		   }
		   .signaturesList {
			   .item {
			   		.time {
			   			padding-right:30rpx;
			   			width: 200rpx;
			   		}
			   }
			   .one, .item {
			   		padding: 10rpx 20rpx;
			   }
		   }
		  
	  }
	  
	  
  }
</style>
